<template>
  <div v-loading="loading" class="approvalDetails">
    <el-card class="title" shadow="never">
      <div>
        <span>{{ goodsInfo.skuName }}</span>
        <span>
          <el-tag v-if="goodsInfo.goodsTypeName" type="danger" size="mini">{{ goodsInfo.goodsTypeName }}</el-tag>
          <el-tag type="success" size="mini">{{ goodsInfo.skuType | transSkuType }}</el-tag>
          <el-tag type="warning" size="mini">{{ goodsInfo.buildStandard | transCreateType }}</el-tag>
          <el-tag v-if="goodsInfo.whiteListFlag === 1" type="primary" size="mini">白名单供应商</el-tag>
        </span>
      </div>
      <div>
        <el-button v-if="approvalStatus" type="success" size="mini" @click="agree">同 意</el-button>
        <el-button v-if="approvalStatus" type="danger" size="mini" @click="reject">驳 回</el-button>
        <el-button size="mini" @click="back">返 回</el-button>
        <el-button type="primary" size="mini" @click="operationLog">操作日志</el-button>
      </div>
    </el-card>
    <div class="commodity">
      <div id="content-scroll" class="el-card box-card is-never-shadow">
        <ul class="wrapper-ul">
          <li v-if="channelId === '0'" class="content-item">
            <base-info ref="baseInfoRef" :is-disabled="isDisabled" class="baseInfo" :goods-info="goodsInfo" :span="24" :xl="24" />
            <goodsAttribute ref="attrRef" :is-disabled="isDisabled" :goods-info="goodsInfo" :span="24" :xl="24" />
          </li>
          <li v-if="channelId === '12' || channelId === '07' || channelId === '06'">
            <base-info ref="baseInfoRef" :is-disabled="isDisabled" class="baseInfo" :goods-info="goodsInfo" :span="24" :xl="24" />
            <!-- <goodsAttributes ref="attrRef" :is-disabled="isDisabled" :goods-info="goodsInfo" :channel-id="channelId" :span="24" :xl="24" /> -->
            <goodsAttribute ref="attrRef" :is-disabled="isDisabled" :goods-info="goodsInfo" :span="24" :xl="24" />
            <div v-if="channelId === '06'" class="categoryAttributeList">
              <el-form ref="ruleForm" class="form" label-width="120px" size="mini" label-position="left" :model="goodsInfo.skuChannelInfos[0]">
                <category-attributes
                  :commodity-attribute="goodsInfo.skuChannelInfos[0]"
                  :category-attributes="categoryAttributeList"
                  :is-disabled="isDisabled"
                  att-name="类目属性"
                  :gutter="0"
                  :span="24"
                  :xl="24"
                />
              </el-form>
            </div>
          </li>
          <li class="content-item">
            <detailPage ref="detailPageRef" :is-disabled="isDisabled" :goods-info="goodsInfo.skuChannelInfos[0]" :build-standard="buildStandard" />
          </li>
        </ul>
      </div>
      <div class="el-card box-card is-never-shadow">
        <ImgPreview ref="ImgPreview" :goods-photos="goodsPhotos" />
      </div>
    </div>
    <rejectApproval ref="rejectApprovalRef" @closeTag="closeTag" />
    <operation-log2 ref="operationLogRef2" :table-data="processDataListLog" :log-list="commodityMaintainLog">
      <template v-slot:createdTime="{ scope }">
        {{ transDate(scope.row.createdTime) }}
      </template>
    </operation-log2>
  </div>
</template>

<script>
import operationLog2 from '@/views/coi/components/operationLog.vue'
import rejectApproval from '@/views/coi/approve/components/rejectApproval.vue'
import { throughProcurementApproval, throughComplianceApproval } from '@/api/coi/onlineTaskAPI/sku'
import moment from 'moment'
import baseInfo from '@/views/coi/making/baseInfo.vue'
import goodsAttribute from '@/views/coi/making/goodsAttribute.vue'
// import goodsAttributes from '@/views/coi/commodityM/components/goodsAttributes.vue'
import detailPage from '@/views/coi/making/detailPage.vue'
import { findChgSkuInfoByProcessId } from '@/api/coi/onlineTaskAPI/sku'
import { transTemplateData, transTemplateData2, filterSkuInfo } from '@/utils/processingData.js'
import categoryAttributes from '@/views/coi/components/categoryAttributes'
import ImgPreview from '@/views/coi/approve/components/ImgPreview.vue'
import { filterKey } from '@/utils/processingData.js'
import { constructionStandard, skuType } from '@/views/coi/commonJs/dictionary.js'
import eventBus from '@/utils/eventBus'
import { commodityMaintainLog } from '@/views/coi/commonJs/operationLogList'
import { operationLogByProcessId } from '@/api/coi/onlineTaskAPI/sku'
export default {
  name: 'ApproveDetail',
  components: {
    baseInfo,
    goodsAttribute,
    // goodsAttributes,
    detailPage,
    categoryAttributes,
    ImgPreview,
    rejectApproval,
    operationLog2
  },
  filters: {
    transSkuType(v) {
      return filterKey(v, skuType)
    },
    transCreateType(v) {
      return filterKey(v, constructionStandard)
    }
  },
  data() {
    return {
      commodityMaintainLog,
      loading: false,
      type: this.$route.query.type,
      id: this.$route.query.upc,
      isDisabled: true,
      contentScroll: null,
      listHeight: [], // 用来存储每一个子盒子的高度
      currentIndex: 0,
      scrollY: 0,
      buildStandard: 0,
      goodsPhotos: {
        skuOptionResources: [],
        transparentImg: [],
        skuResourcesImg: []
      },
      goodsInfo: {
        skuContentResources: [],
        skuContent: {
          content: ''
        },
        skuChannelInfos: []
      },
      menu: [
        { label: '商品信息', id: 0 },
        { label: '商品图片', id: 1 },
        { label: '商品详情', id: 2 }
      ],
      dynamicMenu: [],
      processId: null,
      operationCode: [],
      categoryAttributeList: [],
      channelId: this.$route.params.channelId + '',
      savaLoading: false,
      submitExamineLoading: false,
      params: {},
      processDataListLog: [] // 操作日志
    }
  },
  computed: {
    approvalStatus() {
      return (
        (this.params.mainStatus === '9020' && this.params.from === 'PurchaseApprovalList') ||
        (this.params.mainStatus === '9030' && this.params.from === 'ComplianceApprovalList')
      )
    }
  },
  created() {
    this.params = this.$route.params
    this.queryData(this.$route.params.type)
  },
  methods: {
    transDate(v) {
      if (v === null) {
        return ''
      }
      return moment(v).format('YYYY-MM-DD HH:mm:ss')
    },
    back() {
      this.$router.push({
        name: this.$route.params.from,
        params: { tab: this.$route.params.tab }
      })
    },
    // 路由跳转(补充渠道信息)
    goAddInformation(idList, type) {
      const query = {
        idList,
        type
      }
      this.$router.push({
        path: '/VendoraddInformation_Vendor',
        query
      })
    },
    async queryData(type) {
      try {
        this.$emit('changeLoading', true)
        const id = this.$route.params.id
        const { result } = await findChgSkuInfoByProcessId(id)
        if (result) {
          this.buildStandard = result.buildStandard
          result.transportMode = result.transportMode.toString()
          this.goodsInfo = filterSkuInfo(result)
          result.skuChannelInfos.forEach((item, index) => {
            // 过滤分类照片
            this.goodsPhotos.skuOptionResources = item.skuOptionResources.sort((a, b) => {
              return a.sort - b.sort
            }) // 素材图
            this.goodsPhotos.transparentImg = item.skuResources.filter((item) => item.resourceType === 3) // 透明
            this.goodsPhotos.skuResourcesImg = item.skuResources
              .filter((item) => item.resourceType === 1)
              .sort((a, b) => {
                return a.sort - b.sort
              }) // 主图
            if (this.goodsPhotos.skuResourcesImg.length) this.$refs.ImgPreview.preview(this.goodsPhotos.skuResourcesImg[0].resourceUrl)
            if (this.channelId !== '0') {
              const data = JSON.parse(item.skuChannelInfo)
              if (data.channelAttributeList && item.channelAttributeList.length && Array.isArray(data.channelAttributeList)) {
                item.channelAttributeList.forEach((channelAttribute) => {
                  const index = data.channelAttributeList.findIndex((dataChannelAttribute) => dataChannelAttribute.attrId === channelAttribute.attrId)
                  if (index !== -1) channelAttribute.attrValue = data.channelAttributeList[index].attrValue
                  if (channelAttribute.sign && !channelAttribute.attrValue && this.goodsInfo[channelAttribute.sign]) {
                    channelAttribute.attrValue = this.goodsInfo[channelAttribute.sign]
                  }
                })
              }
              item.skuChannelInfo = null
              if (item.categoryAttributeList && data.categoryAttributeList.length && Array.isArray(data.categoryAttributeList)) {
                item.categoryAttributeList.forEach((categoryAttribute) => {
                  const index = data.categoryAttributeList.findIndex((dataCategoryAttribute) => dataCategoryAttribute.attrId === categoryAttribute.attrId)
                  if (index !== -1) {
                    categoryAttribute.attrValue = data.categoryAttributeList[index].attrValue
                    if ('unitValue' in data.categoryAttributeList[index]) categoryAttribute.unitValue = data.categoryAttributeList[index].unitValue
                  }
                })
              }
            }
            if (this.$route.params.type === 'detail' && this.channelId === '0') {
              transTemplateData2(item.categoryAttributeList)
              transTemplateData2(item.channelAttributeList)
            }
            if (this.channelId === '06') {
              item.channelBrandName = item.brandName
              transTemplateData(item.categoryAttributeList, true, false)
              transTemplateData(item.channelAttributeList, true, false)
              this.categoryAttributeList = Array.isArray(item.categoryAttributeList)
                ? item.categoryAttributeList.filter((item) => item.attributeType === 3)
                : []
            }
          })
        }
      } finally {
        this.loading = false
      }
    },
    agree() {
      const _this = this
      this.$confirm('此操作将同意审核, 是否继续？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        roundButton: true,
        type: 'info'
      })
        .then(() => {
          _this.requestAgree()
        })
        .catch(() => {})
    },
    // 同意审核发请求
    async requestAgree() {
      try {
        let res = null
        const id = this.$route.params.id
        this.loading = true
        if (this.$route.params.from === 'PurchaseApprovalList') res = await throughProcurementApproval(id)
        else if (this.$route.params.from === 'ComplianceApprovalList') res = await throughComplianceApproval(id)
        else return
        if (res.result) {
          this.$message({ type: 'success', message: '同意审核成功！' })
          this.closeTag()
        }
      } catch (error) {
        console.log(error)
        this.loading = false
      } finally {
        this.loading = false
      }
    },
    closeTag() {
      eventBus.$emit('closeTag', this.$route)
    },
    // 拒绝
    reject() {
      this.$refs.rejectApprovalRef.dialogVisible = true
    },
    // 弹出操作日志弹框
    async operationLog() {
      // console.log(this.$route.params.id)
      const { result } = await operationLogByProcessId(this.$route.params.id)
      // console.log(result)
      if (Array.isArray(result) && result.length) {
        this.$refs.operationLogRef2.dialogVisible = true
        this.processDataListLog = result
      } else {
        this.$message({
          type: 'warning',
          message: '未查询到该商品线上建品的操作日志'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.approvalDetails {
  height: 100%;
  padding: 12px;
  padding-top: 8px;
  .title {
    background-color: #fff;
    /deep/ .el-card__body {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:first-child {
        font-weight: 700;
        font-size: 16px;
      }
    }
  }
  .commodity {
    height: calc(100% - 48px);
    display: flex;
    & > .box-card {
      height: 100%;
      flex: 1;
      padding: 15px;
      .wrapper-ul {
        height: inherit;
        overflow: auto;
        &::-webkit-scrollbar {
          width: 5px;
        }
      }
    }
    .box-card:first-child {
      /deep/ .wrapper-ul > div:nth-child(n + 2) {
        margin-top: 15px;
        padding-top: 10px;
        margin-bottom: 10px;
        border-top: 1px dashed #d9d9d9;
      }
    }
    .box-card:first-child {
      /deep/ .wrapper-ul > div > .headline:nth-child(n + 1) {
        padding-bottom: 10px;
      }
    }
  }
}
li {
  margin-right: 15px;
  list-style: none;
}
/deep/ .el-form-item__label::before {
  content: '*';
  margin-right: 4px;
  color: #fff;
}
.form {
  margin: unset !important;
}
.wrapper-ul {
  padding: 0;
  margin-top: 0;
}
</style>
